
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登入</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../res/layui/css/layui.css">
  <link rel="stylesheet" href="../../res/css/global.css">
  <script src="../../res/layui/layui.js"></script>
  <script src="../../js/plugins/jquery.js"></script>
  <script src="../../js/plugins/jquery.cookie.min.js"></script>
</head>
<body>

<div class="layui-container fly-marginTop">
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title">
        <li class="layui-this">登入</li>
        <li><a href="reg.html">注册</a></li>
      </ul>
      <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
        <div class="layui-tab-item layui-show">
          <div class="layui-form layui-form-pane">
            <form method="post">
              <div class="layui-form-item">
                <label  class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                  <input type="text" id="telephone" name="telephone"  class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label  class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="password" name="password"  class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <button id="login" class="layui-btn" >立即登录</button>
                <span style="padding-left:20px;">
                  <a href="reg.html" >注册账号</a>
                </span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


</body>

<script>

    var getWebRootPath = function () {
        var curWwwPath = window.location.host;
        var localhostPath = "http://" + curWwwPath;
        return (localhostPath);
    };
    // 所有的jquery的动态绑定元素需要页面渲染完成以后才可以操作
    jQuery(document).ready(function () {

        $("#login").on("click",function () {
            //拿到界面上所有元素的值
            var telephone=$("#telephone").val();
            var password=$("#password").val();
            if(telephone==null || telephone==""){
                alert("手机号不能为空");
                //我们使用的是ajax传值，所以要捕获点击事件，不让它冒泡排序到上一层
                return false;
            }
            if(password==null || password==""){
                alert("密码不能为空");
                //我们使用的是ajax传值，所以要捕获点击事件，不让它冒泡排序到上一层
                return false;
            }

            $.ajax({
                //头
                type:"POST",
                contentType:"application/x-www-form-urlencoded",

                url:getWebRootPath() +"/user/login",

                //传参
                data:{
                    //获取用户输入的telphone\password等值
                    "telephone":telephone,
                    "password":password,
                },
                //成功的回调函数
                //data是后端输出的json数据
                //与后端的@CrossOrigin(allowCredentials = "true",allowedHeaders = "*")相互呼应
                xhrFields:{withCredentials:true},
                success:function (data) {
                    if(data.status==="success"){
                        window.top.alert("登录成功,开始发表你的言论吧");

                       $(window.parent.document).find('#contentIframe').attr('src','../html/detail_index.html');
                       $.cookie('TelephoneNum', telephone, { expires: 1, path: '/' });
                    }else {
                        window.top.alert("登录失败，原因为" + data.data.errMsg);
                    }

                },
                //失败的回调函数
                error:function (data) {
                    window.top.alert("登录失败，原因为"+ data.responseText);
                }
            });
            return false;
        });

    });

</script>
</html>